<template>
  <div class="goods-image">
    <!-- 左侧大图 -->
    <div class="middle" ref="target">
      <img :src="imageList[activeIndex]"/>
      <!-- 蒙层小滑块 -->
      <div class="layer" :style="{ left:`${left}px`, top:`${top}px` }" v-show="!isOutside"></div>
    </div>
    <!-- 小图列表 -->
    <ul class="small">
      <li v-for="(img,i) in imageList" :key="i"
      @mouseenter="enterHandler(i)" :class="{active:i===activeIndex}">
        <img :src="img"/>
      </li>
    </ul>
    <!-- 放大镜大图 -->
    <div class="large" :style="[
      {
        backgroundImage:`url(${imageList[activeIndex]})`,
        backgroundPositionX:`${positionX}px`,
        backgroundPositionY:`${positionY}px`
      }
    ]" v-show="!isOutside">
    </div>
  </div>
</template>

<script setup>
  import { ref,watch } from 'vue'
  import { useMouseInElement } from '@vueuse/core'
  // const imageList = [
  // "https://yanxuan-item.nosdn.127.net/d917c92e663c5ed0bb577c7ded73e4ec.png",
  // "https://yanxuan-item.nosdn.127.net/e801b9572f0b0c02a52952b01adab967.jpg",
  // "https://yanxuan-item.nosdn.127.net/b52c447ad472d51adbdde1a83f550ac2.jpg",
  // "https://yanxuan-item.nosdn.127.net/f93243224dc37674dfca5874fe089c60.jpg",
  // "https://yanxuan-item.nosdn.127.net/f881cfe7de9a576aaeea6ee0d1d24823.jpg"
  // ]

  defineProps({
    imageList:{
      type:Array,
      default:() => []
    }
  })

  

  let activeIndex = ref(0)
  let target = ref()

  const enterHandler = (i) => {
    activeIndex.value = i
  }

  const {elementX,elementY,isOutside} = useMouseInElement(target)

  let left = ref(0)
  let top = ref(0)

  let positionX = ref(0)
  let positionY = ref(0)



  watch([elementX,elementY,isOutside],() => {
    //如果鼠标没移入盒子内，直接不执行后面的逻辑
    if(isOutside.value){
      return
    }

      if(elementX.value>100&&elementX.value<300){
        left.value = elementX.value - 100
      }

      if(elementY.value>100&&elementY.value<300){
        top.value = elementY.value - 100
      }

      if(elementX.value<100) {left.value = 0}
      if(elementX.value>300) {left.value = 200}

      if(elementY.value<100) {
        top.value = 0
      }

      if(elementY.value>300){
        top.value = 200
      }

      //控制大图显示 2倍
      positionX.value = -left.value * 2
      positionY.value = -top.value * 2
  })

</script>

<style lang="scss" scoped>
  .goods-image {
    width: 480px;
    height: 400px;
    position: relative;
    display: flex;

    .middle {
      width: 400px;
      height: 400px;
      background-color: #f5f5f5;
    }

    .layer {
      position: absolute;
      width: 200px;
      height: 200px;
      background: rgba(0,0,0,0.2);
      //绝对定位，然后跟着我们鼠标控制left和toop属性就可以让滑块移动起来
      left: 0;
      top:  0;
    }

    .small {
      width: 80px;

      li {
        width: 68px;
        height: 68px;
        margin-left: 12px;
        margin-bottom: 15px;
        cursor: pointer;

        &:hover,
        &.active {
          border: 2px solid $xtxColor;
        }
      }
    }

    .large {
      position: absolute;
      top:0;
      left: 412px;
      width: 400px;
      height: 400px;
      z-index: 500;
      box-shadow: 0 0 10px rgba(0,0,0,0.1);
      background-repeat: no-repeat;
      background-size: 800px 800px;
      background-color: #f8f8f8;
      
    }

  }
</style>